@charset "UTF-8";
@media screen and (min-width:961px) {
  * {
    margin: 0;
    padding: 0;
  }
  html {
    height: 100%;
    scroll-behavior: smooth;
  }
  body {
    font-family: "Imbue", "Hina Mincho", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 18px;
    line-height: 3em;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    min-height: 100%;
    color: #553333;
    background-color: #f7f3f3;
    height: auto;
    font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  }
  img {
    outline: none;
    border-style: none;
    vertical-align: bottom;
    width: 100%;
  }
  .flex_c {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .flex_p {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 5%;
  }
  .flex_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .center {
    text-align: center;
  }
  .contents {
    padding: 0% 5% 0 5%;
  }
  .contents .inner {}
  .en_title {
    color: #ef95a4;
  }
  .image {
    margin: 0 auto;
  }
  .image .sp {
    display: none;
  }
  .tl {
    margin: 16px 0;
    line-height: 1.2em;
  }
  .tl img {
    width: 24px;
  }
  .link {
    text-align: center;
    font-size: 40px;
    margin-top: 40px;
  }
  .link img {
    width: 40px;
    padding: 8px 0;
  }
  /*--共通--*/
  .b_box {
    border-top: 1px solid #ded3d3;
    padding: 16px 0;
    overflow: hidden;
  }
  .b_box:first-child {
    border-top: 0px solid #ded3d3;
  }


  /*--director comment--*/
  .dc_box {
    margin: 5%;
    overflow: hidden;
  }
  .dc_box img {
    width: 15%;
    margin-right: 5%;
    float: left;
  }
  .dc_box p {
    float: left;
    width: 80%;
  }
  /*--user’s voice--*/
  .uv_box {
    border: 1px solid #ded3d3;
    padding: 3%;
    width: 42.5%;
    margin-bottom: 3%;
  }
  .uv_box img {
    width: 30%;
    display: block;
    margin: 0 auto 24px auto;
  }
  .uv_box .voice {}
  /*--support--*/
  .supportbox {
    border-top: 1px solid #D6D6D6;
    padding: 64px 0 24px 0;
    overflow: hidden;
    margin: 5%;
  }
  .supportbox .left {
    width: 30%;
    float: left;
  }
  .supportbox .left img {
    width: 40px;
  }
  .supportbox .right {
    width: 70%;
    float: left;
  }
  
  /*--brand concept--*/
  .bc {
    margin: 5%;
    overflow: hidden;
    text-align: center;
  }
  .bc_message {
    text-align: center;
    margin: 5% 0;
  }
  .bc_message img {
    width: 290px;
    display: block;
    margin: 40px auto;
  }
  .btn--orange, a.btn--orange {
    color: #ffffff;
    background-color: #b0882d;
    padding: 16px 24px;
    border-radius: 8px;
  }
  .btn--orange:hover, a.btn--orange:hover {
    color: #fff;
    background: #9c7419;
    padding: 16px 24px;
  }
  .pagetop {
    position: fixed;
    bottom: 24px;
    right: 2%;
  }
  .pagetop a {
    margin: 40px 0 40px 0;
    border-bottom: 0px!important;
    text-decoration: none;
    cursor: pointer;
  }
  .pagetop img {
    width: 80px;
  }

    /*--kv--*/
  .kv{

  }
  .e_title{
    font-size:90px;
    text-align: center;
    margin: 80px 0 24px 0;

  }
  .j_title{
    font-size:32px;
    text-align: center;
    line-height: 2em;
  }

  .image {
    margin: 0 auto;
  }
 
  .image .sp {
    display: none;
  }

  /*--storybox--*/
  .storybox {
    background-color: #efebeb;
    padding: 5%;
    margin: 0 5%;
    background-image: /* 1枚目の背景画像のパス */
    url(../images/l1.png), /* 2枚目の背景画像のパス */
    url(../images/l2.png), /* 3枚目の背景画像のパス */
    url(../images/l3.png), /* 4枚目の背景画像のパス */
    url(../images/l4.png);
    background-position: /* 1枚目の背景画像の表示位置 */
    left 16px top 16px, /* 2枚目の背景画像の表示位置 */
    right 16px top 16px, /* 3枚目の背景画像の表示位置 */
    left 16px bottom 16px, /* 4枚目の背景画像の表示位置 */
    right 16px bottom 16px;
    background-repeat: /* 1枚目の背景画像の設定 */
    no-repeat, /* 2枚目の背景画像の設定 */
    no-repeat, /* 3枚目の背景画像の設定 */
    no-repeat, /* 4枚目の背景画像の設定 */
    no-repeat;
    background-size: /* 1、2枚目の背景画像の共通サイズ */
    64px;
  }
  .storybox p{
    -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-align: center;
  margin: 0 auto;
  font-size: 24px;
  }
  .storywrap{
    margin: 80px 0;
  }
  .storywrap img{
    margin: 64px 0px 0px 0px;
  }
  .storywrap .inner{
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  .stepwrap{
    margin: 80px 0;
  }
  .stepwrap img{
    margin: 64px 0px 0px 0px;
  }
  .stepwrap .inner{
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  /*--monokurostory--*/
  .monokurostory {
    background-image: /* 1枚目の背景画像のパス */
    url(../images/mono_bg.jpg);
    background-repeat: /* 1枚目の背景画像の設定 */
    no-repeat;
    margin: 80px 0;
    padding: 80px 0;
    background-position: center;
    background-size: cover;
  }
  .message {
    background-color: #000000;
    padding: 5%;
    width: 80%;
    margin: 0 auto;
    opacity: 0.9;
  }
  .message p {
    color: #ffffff;
    line-height: 3em;
    text-align: center;
  }
  /*--jewelr--*/
  .jewelrybox {
    background-image: /* 1枚目の背景画像のパス */
    url(../images/cloud.jpg);
    background-repeat: /* 1枚目の背景画像の設定 */
    no-repeat;
    background-size: 100%;
    padding: 1px 0 160px 0;
    
  }
  .jewelrybox .inner {
    width: 70%;
    margin: 0 auto;
    text-align: center;
  }
  .jewelrybox .inner p {
    margin-top: 120px;
  }
  .j_circle {
    width: 30%;
    margin-top: 80px;
  }
  .j_circle2 {
    width: 40%;
  }

  /*--kira--*/
  .kirabox {
    background-image: /* 1枚目の背景画像のパス */
    url(../images/kira_bg.jpg);
    background-repeat: /* 1枚目の背景画像の設定 */
    no-repeat;
    background-size: 100%;
    padding: 80px 0;
    background-color: #000000;
  }
  .kirabox .inner {
    width: 70%;
    margin: 0 auto;
    text-align: center;
  }
  .kirabox .inner p {
    color: #ffffff;
  }
  /*--rina--*/
  .rinabox {
    background-image: /* 1枚目の背景画像のパス */
    url(../images/rina_bg.png);
    background-repeat: /* 1枚目の背景画像の設定 */
    no-repeat;
    background-size: 100%;
    background-position: bottom;
  }
  .rinabox .inner {
    width: 70%;
    margin: 0 auto;
    text-align: center;
  }
  .rinabox .inner p {
    color: #ffffff;
  }
  .rina_circle {
    width: 30%;
    margin: 0px 0 320px 0;
  }

    /*--couponbox--*/
    .couponbox {
      background-color: #786029;
      padding: 5%;

      background-image: /* 1枚目の背景画像のパス */
      url(../images/l1.png), /* 2枚目の背景画像のパス */
      url(../images/l2.png), /* 3枚目の背景画像のパス */
      url(../images/l3.png), /* 4枚目の背景画像のパス */
      url(../images/l4.png);
      background-position: /* 1枚目の背景画像の表示位置 */
      left 16px top 16px, /* 2枚目の背景画像の表示位置 */
      right 16px top 16px, /* 3枚目の背景画像の表示位置 */
      left 16px bottom 16px, /* 4枚目の背景画像の表示位置 */
      right 16px bottom 16px;
      background-repeat: /* 1枚目の背景画像の設定 */
      no-repeat, /* 2枚目の背景画像の設定 */
      no-repeat, /* 3枚目の背景画像の設定 */
      no-repeat, /* 4枚目の背景画像の設定 */
      no-repeat;
      background-size: /* 1、2枚目の背景画像の共通サイズ */
      64px;
      text-align: center;
    }
    .couponbox .inner {
      width: 70%;
      margin: 0 auto;
      text-align: center;
    }
    .couponbox p {
      margin:24px 0;
      color:#ffffff;
    }    
.borderbox{
  border:1px solid #958660;
}

    /*--rinapict--*/
    .rinapict {
      background-image: /* 1枚目の背景画像のパス */
    url(../images/sakura_bg.jpg);
    background-repeat: /* 1枚目の背景画像の設定 */ no-repeat;
    background-size: 100%;
    padding: 80px 0;
    background-color: #ffffff;
    }

    .rinapict .inner {
      width: 80%;
      margin: 0 auto;
      text-align: center;
    }
    .rinapict p {
      margin:24px 0;
 
    } 

    .pl_size{
      width:20%;
    }
    .pl_size_l{
      width:40%;
    }

    .rinapict ul{
      overflow: hidden;
      margin-top:64px;
    }
    .rinapict ul li{
      width: 44%;
      float: left;
      margin: 0 3%;
    }

    .pict_t {
      margin-top: 120px;
    }
    .pict_t2 {
      margin-top: -120px;
    }

    .borderbox{
      border:1px solid #f0aeae;
      padding:24px;
    }


     /*--エナメルジュエリーを手に入れ方--*/
    .kindbox{
      padding: 40px 0 80px 0;
    border-bottom: 1px solid #dddddd;
    }
    .kindbox .color{
      font-size: 14px;
      line-height: 1.4em;

    }
    .kindbox .detail{
    }
    .bar_midashi{
      font-size:28px;
      text-align: center;
      margin: 0 0 40px 0;
      line-height: 2em;
    }
}

@media screen and (max-width:960px) {
  * {
    margin: 0;
    padding: 0;
  }
  html {
    height: 100%;
    scroll-behavior: smooth;
  }
  body {
    font-family: "Imbue", "Hina Mincho", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 15px;
    line-height: 2;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    min-height: 100%;
    color: #553333;
    background-color: #f7f3f3;
    height: auto;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  .flex_c {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex_p {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10% 0% 0px 0%;
  }
  .flex_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .center {
    text-align: center;
  }
  .image {
    margin: 0 auto;
  }
  .image .pc {
    display: none;
  }
  .contents {
    padding: 0% 5%;
  }
  .contents .inner {}
  .en_title {
    color: #ef95a4;
  }
  .tl {
    line-height: 3em;
  }
  .tl img {
    width: 24px;
    top: 8px;
    position: relative;
  }
  .link {
    text-align: center;
    font-size: 24px;
    margin: 40px 0;
  }
  .link img {
    width: 24px;
  }
  /*--共通--*/
  .b_box {
    border-top: 1px solid ##ded3d3;
    margin: 64px 0;
    overflow: hidden;
  }

  .b_box:first-child {
    border-top: 0px solid #ded3d3;
  }


  /*--director comment--*/
  .dc_box {
    margin: 10% 0% 0px 0%;
    overflow: hidden;
  }
  .dc_box img {
    width: 128px;
    display: block;
    margin: 0 auto 24px auto;
  }
  .dc_box p {}
  /*--user’s voice--*/
  .uv_box {
    border: 1px solid #ded3d3;
    padding: 5%;
    margin-bottom: 5%;
  }
  .uv_box img {
    width: 128px;
    display: block;
    margin: 0 auto 24px auto;
  }
  .uv_box .voice {
    width: 100%;
  }
  /*--support--*/
  .supportbox {
    border-top: 1px solid #D6D6D6;
    padding: 10% 0 5% 0;
    overflow: hidden;
    margin: 5% 0;
  }
  .supportbox .left {
    margin-bottom: 16px;
    font-size: 20px;
  }
  .supportbox .left img {
    width: 32px;
  }
  .supportbox .right {}
  /*--support--*/
  .supportbox {
    border-top: 1px solid #D6D6D6;
    padding: 10% 0 5% 0;
    overflow: hidden;
    margin: 5% 0;
  }
  .supportbox .left {
    margin-bottom: 16px;
    font-size: 20px;
  }
  .supportbox .left img {
    width: 32px;
  }
  .supportbox .right {}
  /*--brand concept--*/
  .bc {
    margin: 5% 0;
    overflow: hidden;
    text-align: center;
  }
  .bc_message {
    text-align: center;
    margin: 5% 0;
  }
  .bc_message img {
    width: 40%;
    display: block;
    margin: 40px auto;
  }
  .pagetop {
    position: fixed;
    bottom: 24px;
    right: 4%;
  }
  .pagetop a {
    margin: 40px 0 40px 0;
    border-bottom: 0px!important;
    text-decoration: none;
    cursor: pointer;
  }
  .pagetop img {
    width: 64px;
  }
  .btn--orange, a.btn--orange {
    color: #ffffff;
    background-color: #b0882d;
    padding: 16px 64px;
    border-radius: 8px;
    width: 100%;
  }
  .btn--orange:hover, a.btn--orange:hover {
    color: #fff;
    background: #9c7419;
    padding: 16px 64px;
  }
  .im_box {
    margin-bottom: 40px;
  }
  .im_box .im img {
    margin: 16px 0;
  }
  .im_box h3 {
    text-align: center;
    font-size: 20px;
    line-height: 1.4em;
  }
  .im_box p {

  }
.e_title{
  font-size:40px;
    text-align: center;
    margin: 40px 0 8px 0;
    line-height: 1.5em;

}
.j_title{
  font-size:20px;
  text-align: center;
  margin: 40px 0 0 0;
}
  /*--kv--*/
  .kv{

  }
    /*--KV--*/
    .image {
      margin: 0 auto;
    }
    .image .pc {
      display: none;
    }
  /*--storybox--*/
  .storybox {
    background-color: #efebeb;
    padding: 24%;
    margin: 0 5%;
    background-image: /* 1枚目の背景画像のパス */
    url(../images/l1.png), /* 2枚目の背景画像のパス */
    url(../images/l2.png), /* 3枚目の背景画像のパス */
    url(../images/l3.png), /* 4枚目の背景画像のパス */
    url(../images/l4.png);
    background-position: /* 1枚目の背景画像の表示位置 */
    left 16px top 16px, /* 2枚目の背景画像の表示位置 */
    right 16px top 16px, /* 3枚目の背景画像の表示位置 */
    left 16px bottom 16px, /* 4枚目の背景画像の表示位置 */
    right 16px bottom 16px;
    background-repeat: /* 1枚目の背景画像の設定 */
    no-repeat, /* 2枚目の背景画像の設定 */
    no-repeat, /* 3枚目の背景画像の設定 */
    no-repeat, /* 4枚目の背景画像の設定 */
    no-repeat;
    background-size: /* 1、2枚目の背景画像の共通サイズ */
    50px;
  }
  .storybox p{
    -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-align: center;
  margin: 0 auto;
  font-size: 18px;
  }
  .storywrap{
    margin: 40px 0;
}
  .storywrap img{
    margin-top: 24px;
  }
  .storywrap .inner{
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .stepwrap{
    margin: 80px 0;
  }
  .stepwrap img{
    margin: 24px 0px 0px 0px;
  }
  .stepwrap .inner{
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  /*--monokurostory--*/
  .monokurostory {
    background-image: /* 1枚目の背景画像のパス */
    url(../images/mono_bg_sp.jpg);
    background-repeat: /* 1枚目の背景画像の設定 */
    no-repeat;
    margin: 64px 0;
    padding: 80px 0;
    background-position: center;
    background-size: cover;
  }
  .message {
    background-color: #000000;
    padding: 5%;
    width: 80%;
    margin: 0 auto;
    opacity: 0.9;
  }
  .message p {
    color: #ffffff;
    line-height: 3em;
    text-align: center;
  }
  /*--jewelr--*/
  .jewelrybox {
    background-image: /* 1枚目の背景画像のパス */
    url(../images/cloud_sp.jpg);
    background-repeat: /* 1枚目の背景画像の設定 */
    repeat;
    background-size: 100%;
    padding: 1px 0 40px 0;
  }
  .jewelrybox .inner {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 80px;
  }
  .jewelrybox .inner p {
    margin-top: 64px;
  }
  .j_circle {
    width: 64%;
    margin-top: 40px;
  }
  .j_circle2 {
    width: 50%;
  }

  /*--kira--*/
  .kirabox {
    background-image: /* 1枚目の背景画像のパス */
    url(../images/kira_bg_sp.jpg);
    background-repeat: /* 1枚目の背景画像の設定 */
    no-repeat;;
    padding: 80px 0;
    background-position: center;
    background-size: cover;
    background-color: #000000;
  }
  .kirabox .inner {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .kirabox .inner p {
    color: #ffffff;
  }
  /*--rina--*/
  .rinabox {
    background-image: /* 1枚目の背景画像のパス */
    url(../images/rina_bg.png);
    background-repeat: /* 1枚目の背景画像の設定 */
    no-repeat;
    background-size: 100%;
    background-position: bottom;
  }
  .rinabox .inner {
    width: 70%;
    margin: 0 auto;
    text-align: center;
  }
  .rinabox .inner p {
    color: #ffffff;
  }
  .rina_circle {
    width: 64%;
    margin: 0px 0px 160px 0px;
  }

    /*--couponbox--*/
    .couponbox {
      background-color: #786029;
      padding: 12%;
      background-image: /* 1枚目の背景画像のパス */
      url(../images/l1.png), /* 2枚目の背景画像のパス */
      url(../images/l2.png), /* 3枚目の背景画像のパス */
      url(../images/l3.png), /* 4枚目の背景画像のパス */
      url(../images/l4.png);
      background-position: /* 1枚目の背景画像の表示位置 */
      left 16px top 16px, /* 2枚目の背景画像の表示位置 */
      right 16px top 16px, /* 3枚目の背景画像の表示位置 */
      left 16px bottom 16px, /* 4枚目の背景画像の表示位置 */
      right 16px bottom 16px;
      background-repeat: /* 1枚目の背景画像の設定 */
      no-repeat, /* 2枚目の背景画像の設定 */
      no-repeat, /* 3枚目の背景画像の設定 */
      no-repeat, /* 4枚目の背景画像の設定 */
      no-repeat;
      background-size: /* 1、2枚目の背景画像の共通サイズ */
      50px;
      text-align: center;
    }
    .couponbox .inner {
      margin: 0 auto;
      text-align: center;
    }
    .couponbox p {
      margin:24px 0;
      color:#ffffff;
    }    
.borderbox{
  border:1px solid #958660;
  padding: 16px;
}

    /*--rinapict--*/
    .rinapict {
      background-image: /* 1枚目の背景画像のパス */
    url(../images/sakura_bg_sp.jpg);
    background-repeat: /* 1枚目の背景画像の設定 */ no-repeat;
    background-size: 100%;
    padding: 64px 0 0 0;
    background-color: #ffffff;
    }

    .rinapict .inner {
      width: 80%;
      margin: 0 auto;
      text-align: center;
    }
    .rinapict p {
      margin:24px 0;
 
    } 

    .pl_size,
    .pl_size_l
    {
      width:40%;
    }

    .rinapict ul{
      overflow: hidden;
      margin-top:64px;
    }
    .rinapict ul li{
      margin: 0 0 24px 0 ;
    }

    .pict_t {
      margin-top: 0px;
    }
    .pict_t2 {
      margin-top: 0px;
    }
    .borderbox{
      border:1px solid #f0aeae;
      padding:24px;
    }

    /*--エナメルジュエリーを手に入れ方--*/
    .kindbox{
      padding: 40px 0 24px 0;
    border-bottom: 1px solid #dddddd;
    }
    .kindbox .color{
      font-size: 14px;
      line-height: 1.4em;
      color:#ab9393;

    }
    .kindbox .detail{
    }
    .bar_midashi{
      font-size:18px;
      text-align: center;
      margin: 0 0 24px 0;
    }


}